import { TokenItem, TokenPath, TokenMeta } from '@/components/Theming/TokenList';
import { ColorBlock } from '@/components/Theming/TokenBlocks';

## Theming

FaceLivenessDetector supports [Material3 theming](https://developer.android.com/jetpack/compose/designsystems/material3#material-theming), allowing you to theme FaceLivenessDetector to match the look and feel of your app. To theme FaceLivenessDetector according to your app's theme, wrap FaceLivenessDetector in your app's theme:

```kotlin
@Composable
fun MyTheme(
    content: @Composable () -> Unit
) {
    MaterialTheme(
        // Override colorScheme with custom colors
        colorScheme = LivenessColorScheme.default(),
        // Override shapes with custom shapes
        shapes = MaterialTheme.shapes,
        // Override typography with custom typography
        typography = MaterialTheme.typography,
        content = content
    )
}

MyTheme {
   FaceLivenessDetector(...)
}
```

Amplify UI Face Liveness provides a Material3 color scheme for light mode and dark mode.

**Light mode:**

<ul className="docs-tokenGroup docs-tokenGroup--list">
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-teal-80)"} />
        <TokenPath path={["android", "primary"]} />
        <TokenMeta>{"Color(0xFF047D95)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-white)"} />
        <TokenPath path={["android", "onPrimary"]} />
        <TokenMeta>{"Color.White"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-white)"} />
        <TokenPath path={["android", "background"]} />
        <TokenMeta>{"Color.White"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-neutral-100)"} />
        <TokenPath path={["android", "onBackground"]} />
        <TokenMeta>{"Color(0xFF0D1926)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-white)"} />
        <TokenPath path={["android", "surface"]} />
        <TokenMeta>{"Color.White"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-neutral-100)"} />
        <TokenPath path={["android", "onSurface"]} />
        <TokenMeta>{"Color(0xFF0D1926)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-red-80)"} />
        <TokenPath path={["android", "error"]} />
        <TokenMeta>{"Color(0xFF950404)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-white)"} />
        <TokenPath path={["android", "onError"]} />
        <TokenMeta>{"Color.White"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-orange-20)"} />
        <TokenPath path={["android", "errorContainer"]} />
        <TokenMeta>{"Color(0xFFF5D9BC)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-orange-80)"} />
        <TokenPath path={["android", "onErrorContainer"]} />
        <TokenMeta>{"Color(0xFF663300)"}</TokenMeta>
    </TokenItem>
</ul>

**Dark mode:**

<ul className="docs-tokenGroup docs-tokenGroup--list">
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-teal-40)"} />
        <TokenPath path={["android", "primary"]} />
        <TokenMeta>{"Color(0xFF7DD6E8)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-neutral-100)"} />
        <TokenPath path={["android", "onPrimary"]} />
        <TokenMeta>{"Color(0xFF0D1926)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-neutral-100)"} />
        <TokenPath path={["android", "background"]} />
        <TokenMeta>{"Color(0xFF0D1926)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-white)"} />
        <TokenPath path={["android", "onBackground"]} />
        <TokenMeta>{"Color.White"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-neutral-100)"} />
        <TokenPath path={["android", "surface"]} />
        <TokenMeta>{"Color(0xFF0D1926)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-white)"} />
        <TokenPath path={["android", "onSurface"]} />
        <TokenMeta>{"Color.White"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-red-40)"} />
        <TokenPath path={["android", "error"]} />
        <TokenMeta>{"Color(0xFFEF8F8F)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-neutral-100)"} />
        <TokenPath path={["android", "onError"]} />
        <TokenMeta>{"Color(0xFF0D1926)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-orange-80)"} />
        <TokenPath path={["android", "errorContainer"]} />
        <TokenMeta>{"Color(0xFF663300)"}</TokenMeta>
    </TokenItem>
    <TokenItem namespace={"colors"} key={"android"}>
        <ColorBlock value={"var(--amplify-colors-orange-20)"} />
        <TokenPath path={["android", "onErrorContainer"]} />
        <TokenMeta>{"Color(0xFFEFBF8F)"}</TokenMeta>
    </TokenItem>
</ul>

To theme FaceLivenessDetector using the Amplify UI Face Liveness color scheme, wrap FaceLivenessDetector in a MaterialTheme and pass `LivenessColorScheme` for the theme's color scheme:

```kotlin
MaterialTheme(
    colorScheme = LivenessColorScheme.default()
) {
    FaceLivenessDetector(...)
}
```

If no theme is provided, FaceLivenessDetector uses the default MaterialTheme values.